
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xim/common/get_style_view.dart';
import 'package:xim/common/style/colors.dart';
import 'package:xim/http/apis/user/user_model.dart';
import 'package:xim/widget/common/state.dart';

class ProfileScreenStyle extends Style with AppBarMixin {

  @override
  Color get appBarBgColor => bgColor.color;

  final double menuVerticalPadding = 24;

  ModelColor bgColor = ModelColor(lightColor: const Color(0xffececec), darkColor: const Color(0xff111111));
  ModelColor fgColor = ModelColor(lightColor: const Color(0xfffefefe), darkColor: const Color(0xff181818));
  ModelColor textColor = ModelColor(lightColor: const Color((0xff181818)), darkColor: const Color(0xfffefefe));

  @override
  List<ModelColor> get modelColors => [
    ...super.modelColors,
    bgColor,
    fgColor,
    textColor,
  ];

  Widget userHeader(UserInfoModel userInfo,{void Function()? onClick}){
    return GestureDetector(
      onTap: ()=>onClick?.call(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            children: [
              SizedBox(
                width: 70,
                height: 70,
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                    child: Image.network(userInfo.avatar,)
                ),
              ),
              const SizedBox(width: 12,),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(userInfo.name, style: TextStyle(fontSize: 18,color: textColor.color)),
                  const SizedBox(height: 8,),
                  Text("账号：${userInfo.account}", style: TextStyle(color: textColor.color),),
                ],
              )
            ],
          ),
          Row(
            children: [
              Icon(Icons.qr_code, size: 14, color: textColor.color,),
              const SizedBox(width: 12,),
              Icon(Icons.arrow_forward_ios_rounded, size: 14,color: textColor.color,)
            ],
          )
        ],
      ),
    );
  }


  /// 菜单栏
  List<Widget> menuItems(List<Menu> menus, {double gap=4, bool showDivider=true}){
    Widget item(Menu menu) => GestureDetector(
      onTap: ()=>menu.onTab?.call(),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
        color: fgColor.color,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Icon(menu.icon, color: Colors.blueAccent, size: 20, ),
                const SizedBox(width: 6,),
                Text(menu.title, style: TextStyle(color: textColor.color),),
              ],
            ),
            Icon(Icons.arrow_forward_ios_rounded, size: 12,color: textColor.color)
          ],
        ),
      ),
    );
    return List.generate(menus.length, (index) => item(menus[index]));
  }


}

class Menu {
  final IconData icon;
  final String title;
  final void Function()? onTab;
  Menu(this.icon, this.title, {this.onTab});
}